---
title: Architektur der Astro Islands
description: Erfahre, wie die Architektur von Astro's Islands dazu beiträgt, dass Websites schnell sind.
i18nReady: true
---

import IslandsDiagram from '~/components/IslandsDiagram.astro';
import ReadMore from '~/components/ReadMore.astro';

Astro hat dazu beigetragen, ein neues Frontend-Architekturmuster namens **Island-Architektur** (Inselarchitektur) zu entwickeln und zu verbreiten. Bei der Island-Architektur wird der Großteil der Seite als schnelles, statisches HTML gerendert, wobei kleinere „Inseln“ von JavaScript hinzugefügt werden, wenn Interaktivität oder Personalisierung auf der Seite erforderlich ist (z. B. ein Bildkarussell). Dadurch werden die monolithischen JavaScript-Payloads vermieden, die die Reaktionsfähigkeit vieler anderer moderner JavaScript-Webframeworks beeinträchtigen.

## Eine kurze Geschichte

Der Begriff „Komponenteninsel“ wurde erstmals 2019 von Etsy’s Frontend-Architektin [Katie Sylor-Miller](https://sylormiller.com/) geprägt. Diese Idee wurde dann vom Preact-Erfinder Jason Miller am 11. August 2020 erweitert und in [diesem Beitrag](https://jasonformat.com/islands-architecture/) dokumentiert.

> Die allgemeine Idee einer „Insel“-Architektur ist täuschend einfach: Man rendert HTML-Seiten auf dem Server und fügt Platzhalter oder Slots um hochdynamische Bereiche herum ein [...], die dann auf dem Client in kleine, in sich geschlossene Widgets „hydratisiert“ werden können, die ihr vom Server gerendertes Ausgangs-HTML wiederverwenden.  
> - Jason Miller, Erfinder von Preact

Die Technik, auf der dieses Architekturmuster aufbaut, ist auch als **partielle** oder **selektive Hydratation** bekannt.

Im Gegensatz dazu hydratatieren und rendern die meisten JavaScript-basierten Web-Frameworks eine gesamte Website als eine große JavaScript-Anwendung (auch bekannt als Single-Page-Application oder SPA). SPAs sind einfach und leistungsstark, leiden aber aufgrund der starken Nutzung von JavaScript auf der Client-Seite unter Leistungsproblemen beim Laden der Seite.

SPAs haben ihren Platz, sogar [eingebettet in eine Astro-Seite](/de/guides/migrate-to-astro/from-create-react-app/). Aber SPAs fehlt die Fähigkeit, selektiv und strategisch zu hydrieren, was sie für die meisten Projekte im Web heute zu einer schwerfälligen Wahl macht.

Astro wurde als erstes Mainstream-JavaScript-Webframework mit integrierter selektiver Hydratation bekannt, welches das von Sylor-Miller geprägte Muster der Komponenteninseln verwendet. Seitdem haben wir Sylor-Millers ursprüngliche Arbeit erweitert und weiterentwickelt, die dazu beigetragen hat, einen ähnlichen Komponenteninsel-Ansatz für dynamisch vom Server gerenderte Inhalte zu inspirieren.


## Was ist ein Astro Island?

In Astro ist ein Island eine erweiterte UI-Komponente auf einer ansonsten statischen HTML-Seite.

Ein [**Client-Island**](#client-islands) ist eine interaktive JavaScript-UI-Komponente, die getrennt vom Rest der Seite hydratiert wird, während ein [**Server-Island**](#server-islands) eine UI-Komponente ist, die ihren dynamischen Inhalt getrennt vom Rest der Seite auf den Server überträgt.

Beide Islands führen teure oder langsamere Prozesse unabhängig voneinander aus, und zwar für jede einzelne Komponente, um das Laden der Seite zu optimieren.

## Islands sind Komponenten

Astro-Komponenten sind die Bausteine für deine Seitenvorlage. Sie werden zu statischem HTML ohne clientseitige Laufzeit gerendert.

Stell dir ein Client-Island als ein interaktives Widget vor, das in einem Meer von ansonsten statischem, leichtgewichtigem, servergerendertem HTML schwimmt. Server-Islands können für personalisierte oder dynamische Server-gerenderte Elemente hinzugefügt werden, z.&nbsp;B. für das Profilbild eines eingeloggten Besuchers.

<IslandsDiagram>
  <Fragment slot="headerApp">Header (interaktives Island)</Fragment>
  <Fragment slot="sidebarApp">Sidebar (statisches HTML)</Fragment>
  <Fragment slot="main">
    Statische Inhalte wie Text, Bilder usw.
  </Fragment>
  <Fragment slot="carouselApp">Bilderkarussell (interaktives Island)</Fragment>
  <Fragment slot="footer">Footer (statisches HTML)</Fragment>
  <Fragment slot="source">Quelle: [Islands Architecture: Jason Miller](https://jasonformat.com/islands-architecture/)</Fragment>
</IslandsDiagram>

Ein Island läuft immer isoliert von anderen Islands auf der Seite, und es können mehrere Islands auf einer Seite existieren. Die Client-Islands können dennoch ihren „State“ gemeinsam nutzen und miteinander kommunizieren, auch wenn sie in unterschiedlichen Komponenten&shy;kontexten laufen.

Dank dieser Flexibilität kann Astro mehrere UI-Frameworks wie [React](https://react.dev/), [Preact](https://preactjs.com/), [Svelte](https://svelte.dev/), [Vue](https://vuejs.org/) und [SolidJS](https://www.solidjs.com/) unterstützen. Da sie unabhängig voneinander sind, kannst du sogar mehrere Frameworks auf einer Seite mischen.

:::tip
Obwohl die meisten Entwickler nur ein UI-Framework verwenden, unterstützt Astro mehrere Frameworks im selben Projekt. Dies ermöglicht dir:

- Das Framework wählen, welches für jede Komponente am besten geeignet ist.
- Ein neues Framework erlernen, ohne ein neues Projekt beginnen zu müssen.
- Zusammenarbeit mit anderen Entwicklern, auch wenn ihr mit verschiedenen Frameworks arbeitet.
- Eine bestehende Website schrittweise und ohne Ausfallzeiten auf ein anderes Framework umstellen.
:::

## Client-Islands

Standardmäßig rendert Astro automatisch jede UI-Komponente nur in HTML und CSS und **entfernt automatisch alles clientseitige JavaScript.** 

```astro title="src/pages/index.astro"
<MyReactComponent />
```

Das mag streng klingen, aber dieses Verhalten sorgt dafür, dass Astro-Websites standardmäßig schnell sind und schützt Entwickler davor, versehentlich unnötiges oder unerwünschtes JavaScript zu senden, das ihre Website verlangsamen könnte.

Um eine beliebige statische UI-Komponente in ein interaktives Island zu verwandeln, brauchst du nur eine `client:*`-Direktive. Astro baut dann automatisch dein clientseitiges JavaScript auf und bündelt es für eine optimierte Leistung.

```astro title="src/pages/index.astro" ins="client:load"
<!-- Diese Komponente ist jetzt interaktiv auf der Seite! 
     Der Rest deiner Website bleibt statisch. -->
<MyReactComponent client:load />
```

Bei Islands wird clientseitiges JavaScript nur für die expliziten interaktiven Komponenten geladen, die du mit `client:*`-Direktiven markierst.

Und weil die Interaktion auf Komponentenebene konfiguriert wird, kannst du für jede Komponente unterschiedliche Ladeprioritäten festlegen, je nachdem, wie sie genutzt wird. Zum Beispiel sagt `client:idle`, dass eine Komponente geladen werden soll, wenn der Browser inaktiv ist, und `client:visible` sagt, dass eine Komponente nur geladen werden soll, wenn sie in den Viewport eintritt.

<h3>Vorteile von Client-Islands</h3>

Leistungsvorteile sind die offensichtlichsten Vorteile von Astro Islands: der Großteil deiner Website wird in schnelles, statisches HTML umgewandelt und JavaScript wird nur für die einzelnen Komponenten geladen, die es benötigen. JavaScript ist im Ladevorgang eine der langsamsten Ressourcen, daher zählt jedes Byte.

Ein weiterer Vorteil ist das parallele Laden von Astro Islands. Im Beispiel-Schaubild oben muss das „Bilderkarussell“-Island mit niedriger Priorität nicht das „Header“-Island mit hoher Priorität blockieren. Beide werden parallel und isoliert geladen, was bedeutet, dass der Header sofort interaktiv wird, ohne auf das umfangreichere Bilderkarussell weiter unten auf der Seite warten zu müssen.

Noch besser ist, dass du Astro genau anweisen kannst, wie und wann die einzelnen Komponenten gerendert werden sollen. Wenn das Bildkarussell sehr aufwendig zu laden ist, kannst du eine spezielle [Client-Direktive](/de/reference/directives-reference/#client-directives) hinzufügen, die Astro anweist, das Karussell nur zu laden, wenn es auf der Seite sichtbar wird. Wenn der Benutzer es nie sieht, wird es auch nicht geladen.

Es liegt also an dir als Entwickler, Astro mitzuteilen, welche Komponenten deiner Website im Browser interaktiv sein sollen. Astro wird nur genau das hydratisieren, was auf der Seite benötigt wird, und den Rest deiner Website als statisches HTML belassen.

**Client-Islands sind das Geheimnis der schnellen Leistung von Astro!**

<ReadMore>Lies mehr über [Verwendung von JavaScript-Framework-Komponenten](/de/guides/framework-components/) in deinem Projekt.</ReadMore>

## Server-Islands

Server-Islands sind eine Möglichkeit, teuren oder langsamen serverseitigen Code aus dem Hauptrenderingprozess auszulagern, so dass es einfach ist, hochleistungsfähiges statisches HTML und dynamische servergenerierte Komponenten zu kombinieren.

Füge die Direktive [`server:defer`](/de/reference/directives-reference/#server-directives) zu jeder Astro-Komponente auf deiner Seite hinzu, um sie in ein eigenes Server-Islands zu verwandeln:

```astro title="src/pages/index.astro" "server:defer"
---
import Avatar from '../components/Avatar.astro';
---
<Avatar server:defer />
```

Dadurch wird deine Seite in kleinere Bereiche mit vom Server gerenderten Inhalten aufgeteilt, die parallel geladen werden.

Der Hauptinhalt deiner Seite kann sofort mit Platzhalterinhalten, wie z. B. einem generischen Avatar, gerendert werden, bis der eigene Inhalt deines Islands verfügbar ist. Mit Server-Islands verzögert sich die Darstellung einer ansonsten statischen Seite nicht, wenn kleine Komponenten mit personalisierten Inhalten vorhanden sind.

Dieses Rendering-Muster wurde entwickelt, um portabel zu sein. Es ist nicht von einer Serverinfrastruktur abhängig und funktioniert daher mit jedem Host, von einem Node.js-Server in einem Docker-Container bis hin zu einem serverlosen Anbieter deiner Wahl.

<h3>Vorteile von Server-Islands</h3>

Ein Vorteil von Server-Islands ist die Möglichkeit, die dynamischeren Teile deiner Seite spontan zu rendern. Dadurch können die äußere Hülle und der Hauptinhalt aggressiver gecached werden, was zu einer schnelleren Leistung führt.

Ein weiterer Vorteil ist, dass du deinen Besuchern ein tolles Erlebnis bieten kannst. Server-Islands sind optimiert und werden schnell geladen, oft sogar bevor der Browser die Seite überhaupt gemalt hat. Aber in der kurzen Zeit, die deine Islands zum Rendern brauchen, kannst du benutzerdefinierte Fallback-Inhalte anzeigen und verhindern, dass sich das Layout verschiebt.

Ein Beispiel für eine Website, die von den Astro Server-Islands profitiert, ist ein E-Commerce-Geschäft. Obwohl sich der Hauptinhalt der Produktseiten nur selten ändert, haben diese Seiten in der Regel einige dynamische Elemente:

- Der Avatar des Nutzers in der Überschrift.
- Sonderangebote und Verkäufe für das Produkt.
- Nutzerbewertungen.

Durch die Verwendung von Server-Islands für diese Elemente sieht dein Besucher den wichtigsten Teil der Seite, dein Produkt, sofort. Generische Avatare, Ladespinner und Ladenankündigungen können als Fallback-Inhalte angezeigt werden, bis die personalisierten Teile verfügbar sind.

<ReadMore>Lies mehr über die [Verwendung von Server-Islands](/de/guides/server-islands/) in deinem Projekt.</ReadMore>
